<template>
  <div class="fixed-top">
    <NavBar title="商品评论" fixed back/>
    <van-tabs v-model="active" @click="onTabClick">
      <van-tab :title="'全部(' + countObj.count+ ')'"></van-tab>
      <van-tab :title="'好评(' + countObj.goodCount+ ')'"></van-tab>
      <van-tab :title="'中评(' + countObj.midCount+ ')'"></van-tab>
      <van-tab :title="'差评(' + countObj.badCount+ ')'"></van-tab>
    </van-tabs>
    <EmptyData v-if="commentList.length===0" text="暂无相关评论"/>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <ul class="comment-ul">
        <li v-for="(item, index) in commentList" :key="index">
          <div>
            <div class="comment-header">
              <van-row>
                <van-col span="12">
                  <label class="head">
                    <img :src="item.memberImageUrl === null ? defaultImage : GLOBAL.baseImagePath + item.memberImageUrl" style="width: 20px"/>
                  </label>
                  <span class="name">
                    {{item.memberNickname + ':'}}
                  </span>
                </van-col>
                <van-col span="12" style="text-align: right">
                  <van-rate v-model="item.goodsSroce" :size="16" :count="5" :disabled="rateStatus" disabled-color="#ffd21e" void-color="#ceefe8"/>
                </van-col>
              </van-row>
            </div>
            <div>
              <div>
              <p class="smsg-span">{{item.content}}</p>
              <ul class="comment-sub-ul" v-if="item.commentPic.length>0">
                <li v-for="(it, index) in item.commentPic" :key="index">
                  <div class="comment-pic">
                    <img class="img-item" :src="GLOBAL.baseImagePath + it.imageUrl"/>
                  </div>
                </li>
              </ul>
              </div>
              <div class="comment-reply">
                <van-icon name="pending-evaluate" @click="onMssage(item.id)" />
              </div>
              <div v-if="status(item.status)">
                 <p class="smsg-span"><span style="color: darkgray">掌柜回复：</span>{{item.adminContent}}</p>
              </div>
              <div class="smsg-span" v-if="appenStatus(item.appendContent)">
                <p class="zmsg-span"><span style="color: darkgray">追加评论：</span>{{item.appendContent}}</p>
                  <ul class="comment-sub-ul" v-if="item.appendPic.length>0">
                    <li v-for="(it, index) in item.appendPic" :key="index">
                      <div class="comment-pic">
                        <img class="img-item" :src="GLOBAL.baseImagePath + it.imageUrl"/>
                      </div>
                    </li>
                  </ul>
                <p class="zmsg-span" v-if="status(item.appendStatus)"><span style="color: darkgray">掌柜回复：</span>{{item.appendAdminContent }}</p>
              </div>
            </div>
          </div>
          <div class="comment-gg">
            <span>商品规格：{{item.goodsPropertyName}}</span>
          </div>
        </li>
      </ul>
    </van-list>
  </div>
</template>

<script>
import NavBar from '../../components/common/NavBar.vue'
import EmptyData from '../../components/common/EmptyData.vue'
import commentApi from '../../api/comment'
import { Toast } from 'vant'
import header from '@/assets/user/header.png'
export default {
  data () {
    return {
      active: 0,
      defaultImage: header,
      rateStatus: true,
      finished: false,
      query: {
        goodsId: '',
        // 当前页
        pageIndex: 1,
        // 一页数据量
        pageSize: 5,
        highSroce: 5,
        lowSroce: 0
      },
      loading: false,
      countObj: {
        count: 0,
        goodCount: 0,
        midCount: 0,
        badCount: 0
      },
      tabScore: [{
        lowSroce: 1,
        highSroce: 5
      }, {
        lowSroce: 4,
        highSroce: 5
      }, {
        lowSroce: 3,
        highSroce: 3
      }, {
        lowSroce: 1,
        highSroce: 2
      }],
      commentList: []
    }
  },
  created () {
    this.query.goodsId = this.$route.query.goodsId
  },
  computed: {
  },
  methods: {
    onLoad () {
      this.getList()
    },
    onMssage (valId) {
      this.$router.push({path: '/comment/commentReply', query: {commentId: valId}})
    },
    getList () {
      let _this = this
      commentApi.getCommentListByGoodsId(this.query).then(function (res) {
        if (res.data.status === 0) {
          let list = res.data.re.list
          if (list !== null && list.length > 0) {
            for (let i = 0; i < list.length; i++) {
              _this.commentList.push(list[i])
            }
            _this.countObj = res.data.re.countObj
            _this.query.pageIndex++
            _this.loading = false
          } else {
            _this.loading = false
            _this.finished = true
          }
        } else {
          Toast.fail('获取数据失败')
        }
      })
    },
    onTabClick (index, title) {
      let rang = this.tabScore[index]
      this.commentList.splice(0, this.commentList.length)
      this.query.pageIndex = 1
      this.query.lowSroce = rang.lowSroce
      this.query.highSroce = rang.highSroce
      this.finished = false
    },
    status (val) {
      if (val === 0) {
        return false
      } else {
        return true
      }
    },
    appenStatus (val) {
      if (val === null) {
        return false
      } else {
        return true
      }
    }
  },
  components: {
    NavBar,
    EmptyData
  }
}
</script>
<style scoped>
  .comment-ul {
  }
  .comment-ul li {
    background: #fff;
    padding: 5px;
    border-bottom: 1px solid #eee;
    margin-bottom: 6px;
  }

  .comment-sub-ul {
    width: 100%;
    display: inline-block;
    padding: 5px 0px;
    border-top: 1px solid #fafafa;
    border-bottom: 1px solid #fafafa;
  }

  .comment-ul .comment-reply {
    text-align: right;
    padding: 5px;
    border-bottom: 1px solid #fafafa;
  }

  .comment-sub-ul li {
    float: left;
    border-bottom: none!important;
    display: inline-block;
    width: 33.33333%;
    padding: 0;
  }

  .comment-sub-ul .comment-pic {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-bottom: 100%;
  }
  .comment-sub-ul li img {
    position: absolute;
    left: 0;
    margin: 2%;
    width: 96%;
  }
  .van-card .van-card__title {
    font-weight: 600;
  }
  .comment-header .head{
    width: 20px;
    height: 20px;
    float: left;
    margin-right: 4px;
    line-height: 20px;
  }
  .comment-header .head img{
    width: 22px;
    vertical-align: middle;
  }
  .comment-header .name {
    float: left;
    font-size: 15px;
    color: #1abc9c;
  }

  .comment-gg {
    color: #cccccc;
    font-size: 13px;
    padding: 5px;
  }
</style>
<style>
  .cart-card .van-card__thumb {
    width: 90px!important;
    height: 90px!important;
    left: 5px;
  }

  .cart-card .van-card__thumb img {
    width: 90%;
  }
  .cart-card .van-card__footer {
    right: 5px;
  }
  .smsg-span {
    padding-left: 2em;
    font-size: 12px;
  }
  .zmsg-span {
    font-size: 12px;
  }
</style>
